<template>
	<view>
		<u-navbar title="卡密管理" title-color="#1f1f1f" back-icon-color="#1f1f1f" :background="background"></u-navbar>
		<!-- <view class="flex-col page"> -->
		<view class="flex-col group_2">
			<view class="flex-row justify-between items-center section_2">
				<!-- <view class="flex-col items-start self-end group_4 flex-1">
					<text class="text_2">剩余积分</text>
					<text class="text_4 mt-13">{{integral}}</text>
				</view> -->
				<view class="flex-col items-start self-end flex-1">
					<view class="">
						<text class="text_2">未使用</text>
						<text class="text_4">{{useInfo.wsy}}</text>
						<text class="text_2">张</text>
					</view>
					<view class="mt-13">
						<text class="text_2">已使用</text>
						<text class="text_4">{{useInfo.ysy}}</text>
						<text class="text_2">张</text>
					</view>

				</view>
				<view @click="createCard" class="flex-row justify-center items-center text-wrapper "><text
						class="text_3">购买卡密</text>
				</view>
			</view>
			<view class="flex-row equal-division mt-17">
				<!-- <view @click="openCardType" class="flex-row justify-center items-center section_4 equal-division-item">
					<text class="font">{{cardType != '' ? cardType : '卡类型'}}</text>
					<image v-if="!cardTypeShow" class="image_4 ml-2-5"
						src="https://terminator.axu9.com/images/selector-down.png" />
					<image v-if="cardTypeShow" class="image_4 ml-2-5"
						src="https://terminator.axu9.com/images/selector-up.png" />
				</view> -->
				<view @click="openCardStatus"
					class="ml-14 flex-row justify-center items-center section_4 equal-division-item">
					<text class="font">{{cardStatus != '' ? cardStatus : '激活状态'}}</text>
					<image v-if="!cardStatusShow" class="image_4 ml-2-5"
						src="https://terminator.axu9.com/images/selector-down.png" />
					<image v-if="cardStatusShow" class="image_4 ml-2-5"
						src="https://terminator.axu9.com/images/selector-up.png" />
				</view>
			</view>
			<view class="flex-col mt-17">
				<!-- <view class="flex-col justify-start"> -->
				<view class="flex-col section_5 relative" v-for="(item,index) in recordList" :key="index">
					<view class="flex-row justify-between items-center group_5">
						<view class="flex-row items-center">
							<text class="font_3">{{item.code}}</text>
							<image @click="copyText(item)" class="shrink-0 image_5"
								src="https://terminator.axu9.com/images/copy-icon.png" />
							<text @click="copyText(item)" class="font_4 text_6">复制</text>
							<image v-if="item.type == 3 && item.status == 0" @click="zhuanhuan(item)" src="../../static/image/other/zhuanhuan2.png" style="width: 22rpx;height: 22rpx;margin-left: 40rpx;" class="" mode=""></image>
							<text v-if="item.type == 3 && item.status == 0" @click="zhuanhuan(item)" class="font_4 text_6">转换</text>
						</view>
						<!-- <text class="font_5 text_7">{{item.create_time}}</text> -->
					</view>
					<view class="flex-row justify-between items-center group_6">
						<view class="flex-row items-center">
							<image class="shrink-0 image_6" src="https://terminator.axu9.com/images/yueka-icon.png" />
							<!-- <text
								class="font_6 ml-7">{{item.type == 1 ? '月卡' : item.type == 2 ? '季卡' : item.type ==3 ? '年卡': ''}}</text> -->
							<text
								class="font_6 ml-7">{{item.user ? item.user.nickName : '未使用'}}</text>
						</view>
						<view class="flex-col">
							<text class="font_5 text_7">{{item.create_time}}</text>
							<!-- <text class="font_55 text_7">{{item.type == 3 ? '年卡' : '体验卡'}}</text> -->
						</view>
						
						<!-- <text class="font_7 text_8">{{item.username}}</text> -->
					</view>
					<view class="remarks items-start flex-row">
						<view class="flex-row flex-1">
							<text class="font_notes">备注：</text>
							<view class="flex-row flex-1 items-center">
								<text :class="item.notes ? 'notes-text' : 'notes-placeholder-class'"
									v-if="!item.disabled">{{item.notes ? item.notes : '请输入备注'}}</text>
								<input @blur="notesInputBlur($event,item.id)" v-if="item.disabled" type="text"
									v-model="item.notes" placeholder="请输入备注" class="input-class"
									placeholder-class="notes-placeholder-class" />
								<image @click.stop="updateNotes(index)" class="edit-title-img"
									src="https://terminator.axu9.com/images/edit-tiem-icon.png" mode=""></image>
							</view>
						</view>
						<view class="flex-row">
							<text class="font_55 text_7">{{item.type == 3 ? '年卡' : item.type == 2 ? '体验卡' :''}}</text>
						</view>

					</view>
					<image v-if="item.status == 0" src="https://terminator.axu9.com/images/weishiyong.png" mode=""
						class="status-img"></image>
					<image v-if="item.status == 1" src="https://terminator.axu9.com/images/yishiyong.png" mode=""
						class="status-img"></image>
				</view>
			</view>

		</view>
		<!-- </view> -->
		<!-- 生成卡密弹窗 -->
		<u-popup v-model="popupCard" mode="center" border-radius="20" @close="cancelPop">
			<view class="popup">
				<view class="pop-title">
					<!-- 剩余积分：{{integral}} -->
					卡密价格：{{cardPrice}}元/张
				</view>
				<view class="flex-row justify-between">
					<!-- <view @click="openCardTypePop" class="flex-row justify-center items-center pop-card-type">
						<text class="pop-text">{{cardTypePop != '' ? cardTypePop : '卡类型'}}</text>
						<image v-if="!cardTypePopShow" class="pop-down-icon ml-2-5"
							src="https://terminator.axu9.com/images/selector-down.png" />
						<image v-if="cardTypePopShow" class="pop-down-icon ml-2-5"
							src="https://terminator.axu9.com/images/selector-up.png" />
					</view> -->
					<view class="flex-row justify-center items-center pop-card-type">
						<text class="pop-text">{{cardTypePop != '' ? cardTypePop : '卡类型'}}</text>
					</view>
					<view class="pop-card-num flex-row justify-center items-center">
						<input type="number" @input="cardnumInput" v-model="cardNum" placeholder="输入兑换卡张数"
							placeholder-class="pop-placeholder" class="pop-input" />
					</view>
				</view>
				<view class="pop-xiaohao">
					<!-- 消耗分数：{{xhNum}} -->
					总计：{{totalMoney}}元
				</view>
				<!-- <view v-if="cardTypePop == '年卡'" class="pop-xiaohao">
					克隆音色：1个
				</view> -->
				<view class="pop-bottom flex-row justify-between">
					<view  @click="create" class="pop-bt-btn1">
						生成
					</view>
					<!-- <view v-if="isLoading" class="pop-bt-btn1">
						生成1
					</view> -->

					<view @click="cancelPop" class="pop-bt-btn2">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<!--弹窗 卡类型选择 -->
		<u-picker mode="selector" v-model="cardTypePopShow" :default-selector="[0]" :range="cardTypeList"
			range-key="cateName" @confirm="typePopConfirm"></u-picker>


		<!-- 卡类型选择 -->
		<u-picker mode="selector" v-model="cardTypeShow" :default-selector="[0]" :range="cardTypeList1"
			range-key="cateName" @confirm="typeConfirm"></u-picker>

		<!-- 卡使用状态选择 -->
		<u-picker mode="selector" v-model="cardStatusShow" :default-selector="[0]" :range="cardStatusList"
			range-key="cateName" @confirm="statusConfirm"></u-picker>
			
		<!-- ios支付联系客服弹窗 -->
		<custom-pop ref="custompop"></custom-pop>
		
		<!-- 备注弹窗 -->
		<notesPop ref="notespop" :remark="cardNotes" @editSuccess="editNotesSubmit"></notesPop>
	</view>
</template>

<script>
	import {
		activationcodeList,
		activationcodeListNew,
		getCodePrice,
		buyActivationcode,
		activationcodeBeizhu,
		kamiPrice,
		createCardOrder,
		payCardOrder,
		isPgPay,
		fenLie
	} from "@/api/user.js"
	import customPop from "../../components/customPop/index.vue";
	import notesPop from "../../components/notesPop/index.vue";
	export default {
		components: {
			customPop,
			notesPop
		},
		data() {
			return {
				integral: 0, //剩余积分
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				cardTypeShow: false, //卡类型选择器
				cardTypePopShow: false, //弹窗--卡类型选择器
				cardStatusShow: false, //卡激活状态选择器
				cardTypeList: [
					// {
					// 	cateName: '月卡',
					// 	id: 1
					// },
					// {
					// 	cateName: '季卡',
					// 	id: 2
					// },
					{
						cateName: '年卡',
						id: 3
					}
				],
				cardTypeList1: [{
						cateName: '月卡',
						id: 1
					},
					{
						cateName: '季卡',
						id: 2
					},
					{
						cateName: '年卡',
						id: 3
					}
				],
				cardStatusList: [{
						cateName: '已激活',
						id: 1
					},
					{
						cateName: '未激活',
						id: 2
					}
				],
				cardType: '', //卡类型
				// cardTypePop: '', //弹窗--卡类型
				cardStatus: '', //激活状态
				recordList: [
					// {
					// 	cardno: '86876786666',
					// 	time: '2023-08-18 09:43:36',
					// 	type: 1, //1月卡 2季卡 3年卡
					// 	username: '小张',
					// 	status: 0, //0未使用 1已使用
					// },
					// {
					// 	cardno: '86876786666',
					// 	time: '2023-08-18 09:43:36',
					// 	type: 2, //1月卡 2季卡 3年卡
					// 	username: '小张',
					// 	status: 1, //0未使用 1已使用
					// }
				],
				popupCard: false, //生成卡密弹窗
				xhNum: 0, //消耗积分
				integral: 0, //剩余积分
				cardTypePop: '年卡', //弹窗--卡类型
				cardNum: '', //数量
				isLoading: false, //防止重复点击
				useInfo: {}, //使用张数信息
				cardPrice: 0, //卡密价格/张
				totalMoney: 0, //总计金额
				platform: '', //手机系统类型
				isWechatPayIos: true, //iOS true微信支付 false客服弹窗
				page: 1,//当前页
				totalPage: 1,//总页数
				cardNotes: '',//备注
				editNotesId: '',// 备注id
			}
		},
		onLoad() {
			// this.getList();
			this.getListNew();
			this.getCardPrice();
			this.getSystemInfo();
			this.getIsPgPay();
		},
		onReachBottom() {
			console.log('到底了')
			if(this.page < this.totalPage ){
				this.page ++;
				this.getListNew();
			}else {
				uni.showToast({
					title: '已加载全部',
					icon: 'none'
				})
			}
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			getIsPgPay() {
				isPgPay().then(res => {
			
					if (res.errno == 0) {
						this.isWechatPayIos = res.data == 1 ? true : false;
						console.log(this.isWechatPayIos, 'this.isWechatPayIos')
					}
			
				})
			},
			// 获取手机系统信息
			getSystemInfo() {
				var _this = this;
				uni.getSystemInfo({
					success: function(info) {
						console.log(info, 'info')
						_this.platform = info.platform;
			
					}
				});
			},
			// 获取卡密价格
			getCardPrice() {
				kamiPrice({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res.data, '获取卡密价格')
					if (res.errno == 0) {
						this.cardPrice = Number(res.data)
					}
				})
			},
			// 修改备注
			updateNotes(index) {
				this.recordList[index].disabled = true;
			},
			// 修改备注
			notesInputBlur(e, id) {
				this.editNotes(e.detail.value, id)
			},
			editNotesSubmit(data){
				this.editNotes(data, this.editNotesId)
			},
			// 修改备注
			editNotes(text, id) {
				activationcodeBeizhu({
					id: id,
					notes: text
				}).then(res => {
					if (res.errno == 0) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						if(this.$refs.notespop){
							this.$refs.notespop.close();
							this.$refs.notespop.clear();
						}
						// this.getList()
						this.page = 1;
						this.recordList = [];
						this.cardNotes = '';
						this.getListNew();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			// 复制
			copyText(item) {
				var _this = this;
				uni.setClipboardData({
					data: item.code,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 1000
						});
						_this.cardNotes = item.notes;
						_this.editNotesId = item.id;
						_this.$refs.notespop.open();
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			// 转换
			zhuanhuan(item){
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定将年卡转换成2张体验卡么？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							_this.zhuanhuanJie(item);
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				})
			},
			// 转换接口
			zhuanhuanJie(item){
				console.log(item,'item')
				uni.showLoading({
					title: '转换中',
				})
				fenLie({
					id: item.id
				}).then(res => {
					uni.hideLoading()
					if(res.errno == 0){
						uni.showToast({
							title: '成功',
							icon: 'none',
							duration: 1000
						})
						this.page = 1;
						this.recordList = [];
						this.getListNew();
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				}).catch(err =>{
					uni.hideLoading()
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			// 计算购买卡密钱数
			getPrice() {
				// uni.showLoading({
				// 	title: '计算中'
				// })
				this.totalMoney = this.cardPrice * this.cardNum;
			},
			// 代理商选择卡类型查询价格
			// getPrice(){
			// 	uni.showLoading({
			// 		title: '计算中'
			// 	})
			// 	getCodePrice({
			// 		uid: uni.getStorageSync("userId"),
			// 		type: this.cardTypePop == '月卡' ? 1 : this.cardTypePop == '季卡' ? 2 : this.cardTypePop == '年卡' ? 3 : '',
			// 		num: this.cardNum
			// 	}).then(res => {
			// 		console.log(res,'代理商选择卡类型查询价格')
			// 		uni.hideLoading();
			// 		if(res.errno == 0){
			// 			console.log(res.data)
			// 			this.xhNum = res.data.price
			// 		}else {
			// 			uni.showToast({
			// 				title: res.msg,
			// 				icon: 'none'
			// 			})
			// 		}
			// 	}).catch(err => {
			// 		uni.hideLoading();
			// 	})
			// },
			cardnumInput(e) {
				console.log(e.detail.value, this.cardTypePop, ';;;;')
				if (this.cardTypePop != '') {
					this.getPrice();
				}
			},
			// 获取激活码记录--新
			getListNew(){
				activationcodeListNew({
					uid: uni.getStorageSync("userId"), //用户id
					type: this.cardType == '月卡' ? 1 : this.cardType == '季卡' ? 2 : this.cardType == '年卡' ? 3 :
					'', //1月2季3年
					is_use: this.cardStatus == '未激活' ? 0 : this.cardStatus == '已激活' ? 1 : '', //0未使用1已使用
					page: this.page
				}).then(res => {
					console.log(res, '获取激活码记录')
					if (res.errno == 0) {
						console.log(res.data.list,'res.data.list')
						this.totalPage = res.data.list.last_page;
						var arr = res.data.list.data.map(item => {
							return {
								...item,
								disabled: false
							}
						})
						// this.recordList = arr;
						this.recordList = [...this.recordList, ...arr];
						this.integral = res.data.user ? res.data.user.integral : 0;
						this.useInfo = res.data.use;
					}
				}).catch(err => {
				
				})
			},

			// 获取激活码记录
			getList() {
				activationcodeList({
					uid: uni.getStorageSync("userId"), //用户id
					type: this.cardType == '月卡' ? 1 : this.cardType == '季卡' ? 2 : this.cardType == '年卡' ? 3 :
					'', //1月2季3年
					is_use: this.cardStatus == '未激活' ? 0 : this.cardStatus == '已激活' ? 1 : '', //0未使用1已使用
				}).then(res => {
					console.log(res, '获取激活码记录')
					if (res.errno == 0) {
						var arr = res.data.list.map(item => {
							return {
								...item,
								disabled: false
							}
						})
						this.recordList = arr;
						this.integral = res.data.user ? res.data.user.integral : 0;
						this.useInfo = res.data.use;
					}
				}).catch(err => {

				})
			},
			// 弹窗 打开卡类型选择器
			openCardType() {
				this.cardTypeShow = true;
			},
			// 弹窗 打开卡类型选择器
			openCardTypePop() {
				this.cardTypePopShow = true;
			},
			// 打开卡状态选择器
			openCardStatus() {
				this.cardStatusShow = true;
			},
			// 卡类型--确定
			typeConfirm(e) {
				console.log(e, 'typeConfirm')
				let index = e[0];
				this.cardType = this.cardTypeList1[index].cateName;
				this.page = 1;
				this.recordList = [];
				this.getListNew();
				// this.getList();

			},
			//弹窗 卡类型--确定
			typePopConfirm(e) {
				console.log(e, 'typeConfirm')
				let index = e[0];
				this.cardTypePop = this.cardTypeList[index].cateName;
				console.log(this.cardNum, this.cardTypePop, ';;;;111')
				if (this.cardNum != '') {
					this.getPrice();
				}

			},
			// 卡状态--确定
			statusConfirm(e) {
				console.log(e, 'typeConfirm')
				let index = e[0];
				this.cardStatus = this.cardStatusList[index].cateName;
				this.page = 1;
				this.recordList = [];
				this.getListNew();
				// this.getList();
			},
			// 打开生成卡密弹窗
			createCard() {
				this.popupCard = true;
			},
			// 卡密弹窗--确定
			create() {
				if (this.cardNum == '') {
					uni.showToast({
						title: '购买数量不能为空',
						icon: 'none'
					})
					return
				}
				if (this.cardTypePop == '') {
					uni.showToast({
						title: '卡类型不能为空',
						icon: 'none'
					})
					return
				}
				// this.$refs.custompop.open();
				// return
				
				if (this.platform == 'ios') {
					if(this.isWechatPayIos){
						this.createOrder();
					}else {
						this.$refs.custompop.open();
					}
					
				} else {
					this.createOrder();
				}
				
			
				// this.createOrder();
			},
			// 创建订单
			createOrder() {
				if(this.isLoading){
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				this.isLoading = true;
				createCardOrder({
					uid: uni.getStorageSync("userId"),
					num: this.cardNum,
					price: this.totalMoney,
					type: this.cardTypePop == '月卡' ? 1 : this.cardTypePop == '季卡' ? 2 : this.cardTypePop == '年卡' ?
						3 : ''
				}).then(res => {
					if (res.errno == 0) {
						this.payCard(res.data)
					} else {
						uni.hideLoading();
						this.isLoading = false;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					this.isLoading = false;
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			// 卡密支付
			payCard(orderId) {
				payCardOrder({
					uid: uni.getStorageSync("userId"),
					order_id: orderId
				}).then(res => {
					if (res.errno == 0) {
						console.log(res, '获取支付信息')
						this.wechatPay(res.data.payInfo)
					} else {
						uni.hideLoading();
						this.isLoading = false;
					}
				}).catch(err => {
					this.isLoading = false;
				})
			},
			// 微信支付
			wechatPay(info) {
				console.log(info, 'wechatPay')
				var _this = this;
				uni.requestPayment({
					timeStamp: info.timeStamp,
					nonceStr: info.nonceStr,
					package: info.package,
					signType: info.signType,
					paySign: info.paySign,

					success(res) {
						console.log('成功：', res)
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							duration: 1000
						})
						_this.popupCard = false;
						_this.page = 1;
						_this.recordList = [];
						_this.getListNew();
						// _this.getList();
						_this.xhNum = 0;
						_this.cardNum = '';
						// _this.cardTypePop = '';
						_this.isLoading = false;

					},

					fail(res) {
						console.log('失败：', res)
						uni.hideLoading();
						_this.isLoading = false;
						uni.showToast({
							title: '失败',
							icon: 'none'
						})
					}
				});
			},
			// // 卡密弹窗--确定
			// create(){
			// 	if(this.cardNum == ''){
			// 		uni.showToast({
			// 			title: '购买数量不能为空',
			// 			icon: 'none'
			// 		})
			// 		return
			// 	}
			// 	if(this.cardTypePop == ''){
			// 		uni.showToast({
			// 			title: '卡类型不能为空',
			// 			icon: 'none'
			// 		})
			// 		return
			// 	}
			// 	let jifen = Number(this.integral)
			// 	if(this.xhNum > jifen) {
			// 		uni.showToast({
			// 			title: '积分不足',
			// 			icon: 'none'
			// 		})
			// 		return
			// 	}
			// 	uni.showLoading({
			// 		title: '加载中'
			// 	})
			// 	this.isLoading = true;
			// 	console.log('购买')
			// 	buyActivationcode({
			// 		uid: uni.getStorageSync("userId"),
			// 		type: this.cardTypePop == '月卡' ? 1 : this.cardTypePop == '季卡' ? 2 : this.cardTypePop == '年卡' ? 3 : '',
			// 		num: this.cardNum
			// 	}).then(res => {
			// 		uni.hideLoading();
			// 		this.isLoading = false;
			// 		if(res.errno == 0){
			// 			this.popupCard = false;
			// 			this.getList();
			// 			this.xhNum = 0;
			// 			this.cardNum = '';
			// 			this.cardTypePop = '';
			// 		}else {
			// 			uni.showToast({
			// 				title: res.msg,
			// 				icon: 'none'
			// 			})
			// 		}
			// 	}).catch(err => {
			// 		this.isLoading = false;
			// 		uni.hideLoading();
			// 	})



			// },
			// 卡密弹窗--取消
			cancelPop() {
				this.popupCard = false;
				this.xhNum = 0;
				this.cardNum = '';
				// this.cardTypePop = '';
				this.totalMoney = 0;
			}
		}
	}
</script>

<style>
	@import url(../../static/css/common.css);

	.mt-13 {
		margin-top: 26rpx;
	}

	.mt-17 {
		margin-top: 34rpx;
	}

	.ml-2-5 {
		margin-left: 5rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.mt-14-5 {
		margin-top: 29rpx;
	}

	page {
		background-size: 100% 433rpx;
		/* background-image: linear-gradient(181deg, #d6f4ed 0%, #f5f5f5 100%); */
		background-image: linear-gradient(181deg, #d6f4ed 0%, #ebfaf6 100%);
		background-repeat: no-repeat;
		background-color: #f5f5f5;
	}

	.page {
		/* padding-bottom: 686rpx;
	  background-color: #f5f5f5; */
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 28rpx 28rpx 186rpx;
		background-image: linear-gradient(181deg, #d6f4ed 0%, #ebfaf6 100%);
	}

	.image {
		margin-left: 36rpx;
		width: 655rpx;
		height: 24rpx;
	}

	.group {
		padding-bottom: 24rpx;
	}

	.image_2 {
		width: 16rpx;
		height: 28rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 3rpx;
	}

	.text {
		color: #000000;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.section_3 {
		margin-right: 3rpx;
		background-color: #00bf90;
		border-radius: 0rpx 20rpx 0rpx 0rpx;
		width: 349rpx;
		height: 81rpx;
	}

	.group_2 {
		/* margin-top: -267rpx; */
		padding: 0 28rpx;
	}

	.section_2 {
		/* margin-right: 5rpx;
	  padding: 91rpx 40rpx 35rpx 45rpx;
	  filter: drop-shadow(0rpx -4rpx 7rpx #1f242c12);
	  border-radius: 20rpx; */
		padding: 100rpx 40rpx 70rpx 46rpx;
		width: 690rpx;
		/* height: 298rpx; */
		border-radius: 20rpx;
		background: linear-gradient(-88deg, #33c5d8, #00c959);
		/* box-shadow: 0 -4rpx 7rpx 0 #1f242c12; */
		background-image: url('https://terminator.axu9.com/images/yhgl-top-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_4 {
		margin-top: 17rpx;
		/* padding-bottom: 73rpx; */
	}

	.text_2 {
		color: #b9dcff;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 32rpx;
	}

	.text_4 {
		color: #ffffff;
		font-size: 40rpx;
		font-family: Adobe Heiti Std;
		line-height: 62rpx;
		width: 90%;
		word-break: break-all;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.group_3 {
		width: 212rpx;
	}

	.image_3 {
		width: 172rpx;
		height: 172rpx;
	}

	.text-wrapper {
		width: 212rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(-90deg, #c5fff2, #ffffff);

	}

	.pos_2 {
		position: absolute;
		left: 0;
		right: 0;
		top: 9rpx;
	}

	.text_3 {
		color: #07da76;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 28rpx;
	}

	.equal-division {
		margin-right: 8rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #98a0a9;
	}

	.section_4 {
		flex: 1 1 330rpx;
	}

	.equal-division-item {
		padding: 20rpx 0 16rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		height: 64rpx;
	}

	.image_4 {
		width: 14rpx;
		height: 9rpx;
	}

	.section_5 {
		margin-right: 5rpx;
		padding-left: 35rpx;
		padding-right: 15rpx;
		border-radius: 12rpx;
		background-color: #fff;
		/* background-image: url('https://ide.code.fun/api/image?token=66b61b780412d90011fae046&name=9df257d32cea88e55ca4abac2535b84f.png');
		background-size: 100% 100%;
		background-repeat: no-repeat; */
		margin-bottom: 20rpx;
	}

	.group_5 {
		padding: 30rpx 0 21rpx;
		border-bottom: dashed 1rpx #536074;
	}

	.font_3 {
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 23rpx;
		color: #666666;
	}

	.image_5 {
		margin-left: 19rpx;
		width: 20rpx;
		height: 21rpx;
	}

	.font_4 {
		font-size: 20rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		color: #00bf90;
	}

	.text_6 {
		margin-left: 5rpx;
	}

	.font_5 {
		font-size: 20rpx;
		font-family: Adobe Heiti Std;
		line-height: 16rpx;
		color: #666666;
	}
	.font_55 {
		color: #00bf90;
		text-align: right;
		font-size: 24rpx;
	}
	.text_7 {
		margin-right: 59rpx;
	}

	.group_6 {
		padding: 22rpx 4rpx 28rpx;
	}

	.remarks {
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		color: #222222;
		padding-bottom: 20rpx;
	}

	.input-class {
		/* display: flex;
		flex: 1; */
		/* max-width: 100%; */
		width: 80%;
	}

	.notes-text {
		/* display: flex;
		flex: 1; */
		/* max-width: 100%; */
		max-width: 90%;
		word-break: break-all;
	}

	.notes-placeholder-class {
		font-size: 28rpx;
		font-weight: 500;
		color: #98a0a9;
	}

	.edit-title-img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.image_6 {
		width: 37rpx;
		height: 32rpx;
	}

	.font_6 {
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 29rpx;
		color: #222222;
	}

	.font_notes {
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		/* line-height: 29rpx; */
		color: #222222;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: Adobe Heiti Std;
		line-height: 23rpx;
		color: #00bf90;
	}

	.text_8 {
		margin-right: 58rpx;
	}

	.status-img {
		width: 86rpx;
		height: 84rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.font_2 {
		font-size: 20rpx;
		font-family: PingFang SC;
		color: #ffffff;
	}

	.text_5 {
		line-height: 51rpx;
	}

	.pos_3 {
		position: absolute;
		right: 0;
		top: 4rpx;
		transform: rotate(46deg);
	}

	.section_6 {
		margin-right: 5rpx;
		padding-left: 35rpx;
		padding-right: 15rpx;
		border-radius: 12rpx;
		background-image: url('https://ide.code.fun/api/image?token=66b61b780412d90011fae046&name=aa9bdcffdf590253e2343963645b5ebb.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_9 {
		line-height: 53rpx;
	}

	.pos_4 {
		position: absolute;
		right: 0;
		top: 0;
		transform: rotate(46deg);
	}

	/* 弹窗 */
	.popup {
		padding: 50rpx 30rpx 77rpx;
		background-image: linear-gradient(0deg, #f5f5f5 0%, #dbfff5 100%);
		border-radius: 20rpx;
		width: 552rpx;
	}

	.pop-title {
		margin-left: 7rpx;
		color: #333333;
		font-size: 36rpx;
		font-family: Adobe Heiti Std;
		line-height: 34rpx;
		margin-bottom: 20rpx;
	}

	.pop-card-type {
		padding: 32rpx 54rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		height: 92rpx;
	}

	.pop-input {
		width: 80%;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #98a0a9;
		text-align: center;
	}

	.pop-placeholder {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #98a0a9;
	}

	.pop-text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #98a0a9;
		margin-right: 6rpx;
	}

	.pop-card-num {
		padding: 32rpx 0;
		background-color: #ffffff;
		border-radius: 8rpx;
		width: 262rpx;
		height: 92rpx;
	}

	.pop-down-icon {
		width: 14rpx;
		height: 9rpx;
	}

	.pop-xiaohao {
		margin-left: 20rpx;
		margin-top: 37rpx;
		color: #666666;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 29rpx;
	}

	.pop-bottom {
		margin-top: 48rpx;

	}

	.pop-bt-btn1 {
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 34rpx;
		width: 227rpx;
		height: 68rpx;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 68rpx;
		color: #ffffff;
		text-align: center;
	}

	.pop-bt-btn2 {
		background-color: #ffffff;
		border-radius: 34rpx;
		width: 227rpx;
		height: 68rpx;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 68rpx;
		color: #9da4b1;
		text-align: center;
	}
</style>